<template>
	<view class="container">
		<statusBar></statusBar>
		<view class="con-title">
			<view>
				<image src="../../static/explore-title.svg"/>
			</view>
			<view>探索广场，发现更多新功能</view>
		</view>

		<view class="con-content">
			<view class="msg" @click="toPage(1)">
				<text>消息中心</text>
				<text>探物APP上线啦，快来领取更多福利···</text>
			</view>

			<view class="item" @click="toPage(2)">
				<view class="item-left">
					<text>任务中心</text>
					<text>赶紧来完成任务获得奖励吧</text>
				</view>
				<image src="../../static/explore-1.png"/>
			</view>

			<view class="item" @click="toPage(3)">
				<view class="item-left">
					<text>图鉴空间</text>
					<text>图鉴一站式服务空间</text>
				</view>
				<image src="../../static/explore-1.png"/>
			</view>

			<view class="item-bottom" @click="toPage(4)">
				<view class="item line">
					<view class="item-left">
						<text>买卖闲置</text>
						<text>图鉴一站式服务空间</text>
					</view>
					<image src="../../static/explore-1.png"/>
				</view>
	
				<view class="item line" @click="toPage(5)">
					<view class="item-left">
						<text>真假鉴别</text>
						<text>图鉴一站式服务空间</text>
					</view>
					<image src="../../static/explore-3.png"/>
				</view>
	
				<view class="item line" @click="toPage(6)">
					<view class="item-left">
						<text>焕然养护</text>
						<text>图鉴一站式服务空间</text>
					</view>
					<image src="../../static/explore-2.png"/>
				</view>
	
				<view class="item line" @click="toPage(7)">
					<view class="item-left">
						<text>全球找货</text>
						<text>图鉴一站式服务空间</text>
					</view>
					<image src="../../static/explore-4.png"/>
				</view>
			</view>

		
		</view>
	</view>
</template>

<script setup>
	import { ref,reactive } from 'vue'
  import {
    onLoad,
    onShow
  } from "@dcloudio/uni-app";
	
	const toPage = (item) => {
		switch (item) {
			case 1:
				uni.navigateTo({ url: '/pages/information/index' })
				break;
			case 2:
				uni.navigateTo({ url: '/pages/task/index' })
				break;
			case 3:
				uni.navigateTo({ url: '/pages/information/index' })
				break;
			default:
				uni.showToast({
					title: '敬请期待!',
					icon:'none'
				});
				break;
		}
	}




</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		background-color: #F4F3F7;

		.con-title{
			width: 750rpx;
			height: 184rpx;
			background-color: white;
			padding: 48rpx 0 0 62rpx;
			box-sizing: border-box;

			view:nth-of-type(1){
				width: 100rpx;
				height: 58rpx;
				margin-bottom: 20rpx;

				image{
					width: 100rpx;
					height: 58rpx;
				}
			}
			
			view:nth-of-type(2){
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.con-content{
			width: 750rpx;
			/* height: 1500rpx; */
			background: linear-gradient( 180deg, #FFFFFF 0%, #F4F3F7 20%);
			padding: 40rpx 20rpx 50rpx 20rpx;
			box-sizing: border-box;

			.msg{
				width: 710rpx;
				height: 152rpx;
				background: #ffffff;
				border-radius: 8rpx;
				padding: 32rpx 0 0 40rpx;
				box-sizing: border-box;
				@include flex(column,flex-start,flex-start);

				text:nth-of-type(1){
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #111111;
					margin-bottom: 20rpx;
				}

				text:nth-of-type(2){
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #A9A7B3;
				}

			}

			.item{
				width: 710rpx;
				height: 152rpx;
				background: #ffffff;
				border-radius: 8rpx;
				padding: 32rpx 70rpx 32rpx 40rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				@include flex(row,space-between);

				.item-left{
					height: 100%;
					@include flex(column,space-between,flex-start);
					text:nth-of-type(1){
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #111111;
					}

					text:nth-of-type(2){
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #A9A7B3;
					}
				}

				image{
					width: 68rpx;
					height: 68rpx;
				}
			}	

			.item-bottom{
				width: 710rpx;
				height: 612rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 0 20rpx;
				margin-top: 20rpx;
				box-sizing: border-box;
			}

			.line{
				width: 670rpx;
				padding: 32rpx 50rpx 32rpx 20rpx;
				border-bottom: 2rpx solid #F1F1F1;
				border-radius: 0;
				margin-top: 0;
			}
			.line:last-child{
				border: none;
			}
		}
	}
</style>
